<!-- 排行版 -->

<template>
  <div class="ranking-list">
    <div class="list-item py-10 flex justify-between" v-for="item in rankingData" :key="item.id">
      <div class="left flex items-center">
        <img class="logo" :src="item.logo" alt="logo"/>

        <div class="flex flex-col">
          <strong class="name font-28 textColor mb-6 ">{{ item.name }}</strong>
          <span class="code font-20 text-grey">{{ item.code }}</span>
        </div>
      </div>
      <div class="middle flex items-center justify-center">
        <img class="center-img" :src="getChangeRatioImage(item.change)">

        <!-- <k-line-charts :chartData="item.klineData" /> -->
      </div>
      <div class="flex  right flex-col items-end">
        <strong class="price font-28 textColor mb-6 ">${{ formatPrice(item.price) }}</strong>
        <span class="change font-20" :class="{'up': item.change >= 0, 'down': item.change < 0}">
          {{ item.change >= 0 ? '+' : '' }}{{ item.change }}%
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import KLineCharts from '@/components/kline-charts'

export default {
  name: 'RankingList',
  components: {
    KLineCharts
  },
  props: {
    rankingData: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    formatPrice(price) {
      return price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    },
    getChangeRatioImage(changeRatio){
            return changeRatio > 0 ? require('@/assets/image/market/hot.png') : require('@/assets/image/market/hot.png');
        }
  }
}
</script>

<style lang="scss" scoped>
.ranking-list {
  padding: 2rem;
  background: #000;

  .list-item {
    // display: flex;
    // align-items: center;
    // justify-content: space-between;
    // padding: 1rem 0;

    .left {
    //   display: flex;
    //   align-items: center;
      gap: 1rem;
      width: 12rem;

      .logo {
        width: 2.5rem;
        height: 2.5rem;
      }

      .info {
        // .name {
        //   color: #FFFFFF;
        //   margin-bottom: 0.25rem;
        // }

        // .code {
        //   color: #999999;
        // }
      }
    }

    .middle {
      flex: 1;
      height: 3rem;
      margin: 0 2rem;
    }

    .right {
    //   width: 8rem;
    //   text-align: right;

      .price {
        // color: #FFFFFF;
        // margin-bottom: 0.25rem;
      }

      .change {
        &.up {
          color: #2abc5a;
        }

        &.down {
        color: #c7697f;

        }
      }
    }
  }
}
</style>
